<template>
<<<<<<< HEAD
  <div>
    <h1>我是搜索</h1>
    <h1>{{$route.params.keys}}</h1>
=======
  <div>    
    <TypeNav />
    <div class="main">
      <div class="py-container">
        <!--bread:面包屑，带有x的结构的-->
        <div class="bread">
          <ul class="fl sui-breadcrumb">
            <li>
              <a href="#">全部结果</a>
            </li>
          </ul>
          <ul class="fl sui-tag">
            <li class="with-x" v-if="searchParams.categoryName">{{searchParams.categoryName}}<i v-on:click="removeCategoyName">x</i></li>
            <li class="with-x" v-if="searchParams.keyword">{{searchParams.keyword}}<i v-on:click="removeKeyWord">x</i></li>
            <li class="with-x" v-if="searchParams.trademark">{{searchParams.trademark.split(":")[1]}}<i v-on:click="removeTrademark">x</i></li>            

            <li class="with-x" v-for="(value, index) in searchParams.props" :key="index">{{value.split(":")[1]}}<i v-on:click="removeProps(value)">x</i></li>                        
          </ul>
        </div>

        <!--selector-->
        <SearchSelector @trademarkInfo="trademarkInfo" @attrInfo="attrInfo" />
        
        <!--details-->
        <div class="details clearfix">
          <!-- 标题 -->
          <div class="sui-navbar">      
            <div class="navbar-inner filter">
              <!-- 价格 -->
              <ul class="sui-nav">
                <li :class="{active:abc}" @click="suiNav1"><a>综合                  
                  <i v-if="abcWww && abc">↑</i>
                  <i v-if="defWww && abc">↓</i>
                </a></li>
                <li :class="{active:def}" @click="suiNav2"><a>价格
                  <i v-if="abcWww && def">↑</i>
                  <i v-if="defWww && def">↓</i>
                  </a></li>
              </ul>
            </div>
          </div>
          <!-- 销售产品列表 -->
          <div class="goods-list">
            <ul class="yui3-g">
              <li class="yui3-u-1-5" v-for="(value) in goodsList" :key="value.id">
                <router-link class="list-wrap" :to="`/Detail/${value.id}`">
                  <!-- 商品图片 -->
                  <div class="p-img">
                    <!-- 在路由跳转的时候切记别忘记带id（params）参数 -->
                    <a><img :src="value.defaultImg" alt=""></a>                   
                  </div>
                  <!-- 钱 -->
                  <div class="price">
                    <strong>
                      <em>¥</em>
                      <i>{{value.price}}.00</i>
                    </strong>
                  </div>
                  <!-- 商品基本信息 -->
                  <div class="attr">
                    <a target="_blank" href="item.html" :title="value.title">
                      {{value.title}}</a>
                  </div>
                  <!-- 评论 -->
                  <div class="commit">
                    <i class="command">已有<span>2000</span>人评价</i>
                  </div>
                  <div class="operate">
                    <a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
                    <a href="javascript:void(0);" class="sui-btn btn-bordered">收藏</a>
                  </div>
                </router-link>
              </li>                         
            </ul>
          </div>
          <!-- 分页 -->
          <Pagination 
            :pageNo="searchParams.pageNo" 
            :pageSize="searchParams.pageSize" 
            :total="totalList" :continues="5" 
            @getPageNo="getPageNo"
          />          
        </div>
      </div>
    </div>
   
>>>>>>> ecb56e7 (first commit)
  </div>
</template>

<script>
<<<<<<< HEAD
export default {
  name: "Search",
  mounted() {
    // console.log(this)
  },

}
</script>

<style>

=======
import { mapGetters } from 'vuex';
import SearchSelector from "./SearchSelector/index.vue";
export default {
  name: "Search",
  data() {
    return {
      searchParams: {
        category1Id: "",
        category2Id: "",
        category3Id: "",
        categoryName: "",
        keyword: "",
        order: "1:asc",
        pageNo: 1,
        pageSize: 5,
        props: [],
        trademark: "",
      },  
      t1: false,
      t2: false,
    };
  },
  beforeMount() {    
    // 获取参数赋值对象
    Object.assign(this.searchParams, this.$route.query, this.$route.params);
  },
  computed: {    
    ...mapGetters({goodsList: "goodsList"}),
    ...mapGetters({totalList:"totalList"}),
    abc() {      
      return this.searchParams.order.split(":")[0] === "1";
    },
    def() {
      return this.searchParams.order.split(":")[0] === "2";
    },

    abcWww() {
      return this.searchParams.order.split(":")[1] === 'asc';
    },
    defWww() {
      return this.searchParams.order.split(":")[1] === 'desc';
    },      
  },
  mounted() {
    this.btn();   
  },
  methods: {
    btn() {                
      // 发送请求
      this.$store.dispatch("searchInfo", this.searchParams);
    },
    removeCategoyName() {
      // 清空缓存
      this.searchParams.category1Id = undefined;
      this.searchParams.category2Id = undefined;
      this.searchParams.category3Id = undefined;
      this.searchParams.categoryName = undefined;
      this.btn();

      if(this.$route.params) {
        this.$router.push({name: "search", params: this.$route.params});
      }            
    },
    removeKeyWord() {
      this.searchParams.keyword = undefined;
      this.btn();
      
      if(this.$route.query) {
        this.$router.push({name: "search", params: this.$route.query});
      }
    },
    removeTrademark() {
      this.searchParams.trademark = undefined;
      this.btn();
    },
    removeProps(value) {
      this.searchParams.props = this.searchParams.props.filter((v) => {
        if(v !== value) {
          return v;
        }
      });

      this.btn();
    },
    // 数据回流
    trademarkInfo(trademark) {
      this.searchParams.trademark = `${trademark.tmId}:${trademark.tmName}`;
      this.btn();
    },
    attrInfo(name, number) {      
      let props = `${name.attrId}:${number}:${name.attrName}`;
      if(this.searchParams.props.indexOf(props) == -1) {
        this.searchParams.props.push(props);
      }
      this.btn()
    },
    getPageNo(value) {
      this.searchParams.pageNo = value;
      this.btn();
    },

    // 排序
    suiNav1() {
      this.t2 = false;
      if(this.t1 = !this.t1) {       
        this.searchParams.order = "1:asc";
        this.btn();
      }else {
        this.searchParams.order = "1:desc";
        this.btn();
      };
    },
    suiNav2() {     
      this.t1 = false;
      if(this.t2 = !this.t2) {        
        this.searchParams.order = "2:asc";
        this.btn();
      }else {
        this.searchParams.order = "2:desc";
        this.btn();
      };
    },
  },
  watch: {        
    $route: {
      handler() {
        // 清空缓存
        this.searchParams.category1Id = undefined;
        this.searchParams.category2Id = undefined;
        this.searchParams.category3Id = undefined;

        // 获取参数赋值对象
        Object.assign(this.searchParams, this.$route.query, this.$route.params);       
        this.btn();
      },
      deep: true,
    },
  },
  components: {
    SearchSelector,
  },
}
</script>

<style scoped>
  .main {
    margin: 10px 0;
  }

  .main .py-container {
    width: 1200px;
    margin: 0 auto;
  }
  /* 面包屑 */
  .main .py-container .bread {
      margin-bottom: 5px;
      overflow: hidden;
  }
  .main .py-container .bread .sui-breadcrumb {
      padding: 3px 15px;
      margin: 0;
      font-weight: 400;
      border-radius: 3px;
      float: left;
  }
  /* 全部商品 */
  .main .py-container .bread .sui-breadcrumb li {
    display: inline-block;
    line-height: 18px;
  }
  .main .py-container .bread .sui-breadcrumb li a {
    color: #665;
    text-decoration: none;
  }
  .main .py-container .bread .sui-breadcrumb li a:hover {
    color: #4cb9fc;
  }
  /* 勾选商品 */
  .main .py-container .bread .sui-tag {
    margin-top: -5px;
    list-style: none;
    font-size: 0;
    line-height: 0;
    padding: 5px 0 0;
    margin-bottom: 18px;
    float: left;
  }
  .main .py-container .bread .sui-tag .with-x {
    font-size: 12px;
    margin: 0 5px 5px 0;
    display: inline-block;
    overflow: hidden;
    color: #000;
    background: #f7f7f7;
    padding: 0 7px;
    height: 20px;
    line-height: 20px;
    border: 1px solid #dedede;
    white-space: nowrap;
    transition: color 400ms;
    cursor: pointer;
  }
  .main .py-container .bread .sui-tag .with-x i {
    margin-left: 10px;
    cursor: pointer;
    font: 400 14px tahoma;
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
  .main .py-container .bread .sui-tag .with-x:hover {
    color: #28a3ef;
  }

  /* 手机标题 */
  .main .py-container .details {
    margin-bottom: 5px;
  }
  .main .py-container .details .sui-navbar {
    overflow: visible;
    margin-bottom: 0;
  }
  .main .py-container .details .sui-navbar .filter {
    min-height: 40px;
    padding-right: 20px;
    background: #fbfbfb;
    border: 1px solid #e2e2e2;
    padding-left: 0;
    border-radius: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
  }
  .main .py-container .details .sui-navbar .filter .sui-nav {
    position: relative;
    left: 0;
    display: block;
    float: left;
    margin: 0 10px 0 0;
  }
  .main .py-container .details .sui-navbar .filter .sui-nav li {
    float: left;
    line-height: 18px;
  }
  .main .py-container .details .sui-navbar .filter .sui-nav li a {
    display: block;
    cursor: pointer;
    padding: 11px 15px;
    color: #777;
    text-decoration: none;
  }
  .main .py-container .details .sui-navbar .filter .sui-nav .active a {
    background: #e1251b;
    color: #fff;
  }

  /* 销售产品列表 */
  .main .py-container .details .goods-list {
    margin: 20px 0;
  }
  .main .py-container .details .goods-list ul {
    display: flex;
    flex-wrap: wrap;
  }
  .main .py-container .details .goods-list ul li {
    height: 100%;
    width: 20%;
    margin-top: 10px;
    line-height: 28px;
  }
  .main .py-container .details .goods-list ul li .list-wrap .p-img {
    padding-left: 15px;
    width: 215px;
    height: 255px;
  }
  .main .py-container .details .goods-list ul li .list-wrap .p-img a {
    color: #666;
  }
  .main .py-container .details .goods-list ul li .list-wrap .p-img a img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
  }
  
  /* 钱 */
  .main .py-container .details .goods-list ul li .list-wrap .price {
    padding-left: 15px;
    font-size: 18px;
    color: #c81623;    
  }
  .main .py-container .details .goods-list ul li .list-wrap .price strong {
    font-weight: 700;
  }
  .main .py-container .details .goods-list ul li .list-wrap .price strong i {
    margin-left: 5px;
  }
  /* 商品基本信息 */
  .main .py-container .details .goods-list ul li .list-wrap .attr {
    padding-left: 15px;
    width: 85%;
    overflow: hidden;
    margin-bottom: 8px;
    min-height: 38px;
    cursor: pointer;
    line-height: 1.8;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .main .py-container .details .goods-list ul li .list-wrap .attr a {
    color: #333;
    text-decoration: none;
  }
  /* 评论 */
  .main .py-container .details .goods-list ul li .list-wrap .commit {
    padding-left: 15px;
    height: 22px;
    font-size: 13px;
    color: #a7a7a7;
  }
  .main .py-container .details .goods-list ul li .list-wrap .commit span {
    font-weight: 700;
    color: #646fb0;
  }
  /* 购物车与收藏 */
  .main .py-container .details .goods-list ul li .list-wrap .operate {
    padding: 12px 15px;
  }
  .main .py-container .details .goods-list ul li .list-wrap .operate .sui-btn {
    display: inline-block;
    padding: 2px 14px;
    box-sizing: border-box;
    margin-bottom: 0;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 0;
    background-color: transparent;
    margin-right: 15px;
  }
  .main .py-container .details .goods-list ul li .list-wrap .operate .btn-bordered {
    min-width: 85px;
    background-color: transparent;
    border: 1px solid #8c8c8c;
    color: #8c8c8c;
  }
  .main .py-container .details .goods-list ul li .list-wrap .operate .btn-bordered:hover {
    border: 1px solid #666;
    color: #fff !important;
    background-color: #666;
    text-decoration: none;
  }
  .main .py-container .details .goods-list ul li .list-wrap .operate .btn-danger {
    border: 1px solid #e1251b;
    color: #e1251b;
  }
  .main .py-container .details .goods-list ul li .list-wrap .operate .btn-danger:hover {
    border: 1px solid #e1251b;
    background-color: #e1251b;
    color: white !important;
    text-decoration: none;
  }
  
>>>>>>> ecb56e7 (first commit)
</style>